<template>
  <div class="publishtemplate">
    <el-dialog title="发布模板" :visible.sync="teaDialogVisible" width="60%">
      <el-form :model="formData">
        <el-form-item label="页面属性">
          <el-radio v-model="formData.publishtype" :label="1">个性化域名</el-radio>
          <el-radio v-model="formData.publishtype" :label="2">通用域名</el-radio>
          <div class="Personalize" v-if="formData.publishtype == 1">
            <div class="searchbox">
              <el-input placeholder="请输入要搜索的域名" v-model="domainFormData.param" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="searchlist"></el-button>
              </el-input>
            </div>
            <div class="yuminglist">
              <el-table
                ref="multipleTable"
                :data="domainDatas"
                tooltip-effect="dark"
                style="width: 100%; margin-bottom: 20px"
                @select="handleSelectionChange"
                @select-all="handleSeleAll"
                :row-key="getRowKeys">
                <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
                <el-table-column prop="platformName" label="平台名称"></el-table-column>
                <el-table-column prop="domainName" label="域名" show-overflow-tooltip></el-table-column>
              </el-table>
              <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="domainFormData.pageSize"
                :current-page="domainFormData.pageNum"
                @current-change="SetPage">
              </el-pagination>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="colseDialogTea">取 消</el-button>
        <el-button type="primary" @click="surePublishTemplate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { publistTemplate, getDomainList } from "@/api/basisMG";
export default {
  props: {
    teaDialogVisible: {
      type: Boolean
    },
  },
  data() {
    return {
      formData: {
        publishtype: 1,
        domain: "",
      },
      publishFormData: {
        templateId: "",
        domainList: [],
      },
      defaultDomain: [
        {
          domain: "default",
          plate: "通用",
        },
      ],
      domainFormData: {
        param: "",
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      domainDatas: [],
      multipleSelection: [],
      multipleSelectionAll: [], // 全选
      domidarr: [],
    };
  },
  methods: {
    // 分页
    SetPage(e) {
      this.domainFormData.pageNum = e;
      this.getDomainList();
    },
    searchlist() {
      this.getDomainList();
    },
    async getDomainList() {
      const res = await getDomainList(this.domainFormData);
      if (res.data) {
        this.domainDatas = [];
        res.data.content.forEach((item) => {
          this.domainDatas.push({ ...item, newId: item.id });
        });
        this.total = res.data.total;
        for (let i = 0; i < this.domainDatas.length; i++) {
          for (let j = 0; j < this.domidarr.length; j++) {
            if (this.domidarr[j].id == this.domainDatas[i].id) {
              this.$refs.multipleTable.toggleRowSelection(this.domainDatas[i], true);
            }
          }
        }
      }
    },
    showPublish(row) {
      this.publishFormData.templateId = row.id;
    },
    // 选中/取消某一行
    handleSelectionChange(val, row) {
      this.multipleSelection = val;
      const checkedDData = val.filter((item) => item.id === row.id);
      if (checkedDData.length > 0 && this.multipleSelectionAll.length === 0) {
        let index = this.domidarr.indexOf(row);
        if (index == -1) {
          this.domidarr.push(row);
        }
      } else {
        this.domidarr = this.domidarr.filter((item) => item.newId !== row.newId);
      }
    },
    // 全选/取消全选
    handleSeleAll(selection) {
      this.multipleSelectionAll = selection;
      if (selection.length != 0) {
        this.domidarr = selection;
      } else {
        this.domainDatas.forEach((item) => {
          this.domidarr = this.domidarr.filter((ite) => ite.newId !== item.newId);
        });
      }
    },
    surePublishTemplate() {
      this.$confirm("要发布该模板吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let newDomidArr = [];
          newDomidArr = this.domidarr.map((item) => ({
            domain: item.domainName,
            plate: item.platformName,
          }));
          if (this.formData.publishtype == 1) {
            this.publishFormData.domainList = [...new Set(newDomidArr)];
          } else {
            this.publishFormData.domainList = this.defaultDomain;
          }
          const data = await publistTemplate(this.publishFormData);
          if (data.code != 200) return this.$message.error("操作失败请稍后重试");
          this.$message({
            type: "success",
            message: "发布成功!",
          });
          this.emitList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "模板数据对应页面数据为空!",
          });
        });
    },
    emitList() {
      this.$emit("publistList");
    },
    colseDialogTea () {
      this.$emit("colseDialogTea");
    },
    getRowKeys(row) {
      if (row.id) {
        //判断条件，根据自己的项目进行添加
        return row.id; //一般是你选择项的id
      }
    },
  },
  created() {
    this.getDomainList();
  }
};
</script>
<style lang="scss"></style>
